<template>
  <div>
    <el-dialog
      :visible.sync="showTrue.value"
      width="580px"
      height="405px"
      @close="closeDialog"
      custom-class="dialogNoPadding dialogFontGray"
    >
    <template slot="title"><span class="editAddress_header">提示</span></template>  
    <!-- 提交地址表单 -->
      <div class="editAddress_Box">
        <el-form ref="addressForm" :model="addressForm" label-width="80px" :rules="rules">
       <el-form-item label="联系人:"  prop="name" label-width="100px">
       <el-input v-model="addressForm.name" style="width:130px"></el-input>
     </el-form-item>
     <el-form-item label="所在地区:"  prop="areaAddress" label-width="100px">
       <el-input v-model="addressForm.areaAddress" style="width:130px"></el-input>
     </el-form-item>

<el-form-item label="街道地址:" prop="streetAddress" label-width="100px">
       <el-input v-model="addressForm.streetAddress" style="width:410px"></el-input>
     </el-form-item>

<el-form-item label="电话:" prop="phone" label-width="100px">
       <el-input v-model="addressForm.phone" style="width:130px"></el-input>
     </el-form-item>
     <el-form-item label="公司:" prop="company" label-width="100px">
       <el-input v-model="addressForm.company" style="width:130px"></el-input>
     </el-form-item>



</el-form>
<el-button class="baseBut bg_base setShip_center" @click="handelAddress" >保存</el-button>
    
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props:["showTrue"],
  data() {
    return {
      
      addressForm:{
       name:'',
       areaAddress:'',
       streetAddress:'',
       phone:'',
       company:''
      },
        rules:{
          name:[{required: true, message: '请输入联系人名称', trigger: 'blur',},
          { min: 1, max: 20, message: '姓名不能超过60个字符', trigger: 'blur' }],
          areaAddress:{required:true,message:"请输入所在地区",trigger:"blur"},
          streetAddress:{required:true,message:"请输入街道地址",trigger:"blur"},
          phone:[{required:true,message:"请输入正确的电话号码",trigger:"blur"},
          { min: 1, max: 11, message: '请输入正确的手机号码', trigger: 'blur' },
          {type:"number", message: '请输入正确的手机号码', trigger: 'blur' }],
          company:{min: 0, max: 20, message: '请不要输入过长内容', trigger: 'blur'},

          
        }
      
      
    };
  },
  methods: {
    closeDialog() {
      this.$emit("close");
    },
    submitDialog() {
      this.$emit("submit");
    },
    handelAddress(){

    }
  },
  mounted() {
    
  }
};
</script>

<style scoped>
.editAddress_Box {
  margin:20px 50px 20px 20px;
  display: flex;
  
  
  flex-wrap: wrap;
}
.editAddress_header{
  margin-left: 20px;

}
.setShip_center {
  display: block;
  margin: auto;
  float: none;
  margin-bottom: 40px;
  margin-top:20px;
}
.editAddress_Box .el-form-item {
    margin-bottom: 16px;
}
</style>